<template>
  <div style="padding-left: 20px">
    <el-form :model="form" label-width="100px" size="mini">
      <el-form-item label="栏目">
        <el-cascader
          v-model="form.nodeid"
          :options="options"
          :props="{ value: 'nodeId', label: 'name', checkStrictly: true }"
          clearable
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="标题">
        <el-input
          v-model="form.title"
          placeholder="标题"
          style="width:500px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章所属机构">
        <el-select v-model="form.orgID" placeholder="选择文章所属机构">
          <el-option label="军事科学院" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布人">
        <el-select v-model="form.creatorId" placeholder="选择发布人">
          <el-option label="管理员" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="form.area" placeholder="选择类型">
          <el-option label="文章" value="0"></el-option>
          <el-option label="通知" value="1"></el-option>
          <el-option label="公告" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键">
        <el-input
          v-model="form.keyword"
          placeholder="输入关键字以'，'（逗号）隔开"
          style="width:500px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input
          v-model="form.users"
          placeholder="输入作者"
          style="width:500px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="优先级">
        <el-input
          v-model="form.priority"
          placeholder="输入优先级"
          style="width:500px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否支持评论">
        <el-select v-model="form.support">
          <el-option label="支持" value="1"></el-option>
          <el-option label="不支持" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="form.class" placeholder="选择分类">
          <el-option label="无" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="栏目时效">
        <el-date-picker
          v-model="form.time"
          type="date"
          placeholder="选择失效日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="标题图">
        <div class>
          <el-upload
            action="/generator/upload/upload"
            list-type="picture-card"
            :auto-upload="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-link :underline="false">点击上传标题图</el-link>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
      </el-form-item>
      <el-form-item label="文章内容">
        <UE :initialFrameHeight="300" v-model="form.content"></UE>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as apis from "../api";
import UE from "@/components/ueditor.vue";
export default {
  name: "",
  components: {
    UE
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      options: [],
      form: {
        nodeid: null, //栏目
        title: "", //标题
        orgID: "", //文章机构
        area: "", //类型
        creatorId: "", //发布人
        time: "", //栏目时效
        users: "", //作者
        keyword: "", //关键字
        support: "", //支持评论
        class: "", //分类
        content: "", //文章内容
        priority: "" //优先级
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      updata: "", //向服务器进行传递的参数（带有图片formdata）
      updateUrl: this.serverUrl + "/generator/upload/upload"
    };
  },
  created() {
    this.columnList();
  },
  methods: {
    //文章新增
    addMent() {
      if (this.form.nodeid == null) {
        this.form.nodeid = null;
        console.log(this.form.nodeid);
      } else {
        this.form.nodeid = this.form.nodeid.pop();
        console.log(this.form.nodeid);
      }
      const data = {
        nodeId: this.form.nodeid,
        title: this.form.title,
        orgID: this.form.orgID,
        type: this.form.area,
        creatorId: this.form.creatorId,
        invalidTime: this.form.time,
        author: this.form.users,
        keyword: this.form.keyword,
        support: this.form.support,
        infotype: this.form.class,
        content: this.form.content,
        priority: this.form.priority
      };
      apis.addMent(data).then(res => {});

      this.updata = new FormData();
      // apis.pictureUp({files:this.updata}).then(res => {});
    },
    //栏目列表
    columnList() {
      apis.columnView().then(res => {
        if (res.data.code == 200) {
          this.options = res.data.list;
        }
      });
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `标题图只能选择一张，本次选择了 ${files.length} 张`
      );
    }
  }
};
</script>

<style lang="scss" scoped>
>>> .el-upload-list--picture-card .el-upload-list__item {
  width: 600px;
  height: 250px;
}
</style>
